<!DOCTYPE html> 
 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <title>滑动动画效果</title> 
    <style type="text/css">
     #swich{width: 300px;display: block;border: 1px solid #ccc;padding: 10px 20px;} 
    </style>
    <script language="javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">

    $(function(){

        var $ChangeP = $('p').eq(1);
        $ChangeP.hide('fast');

        $('a.more').click(function(event) {
          event.preventDefault();

          
          $ChangeP.slideToggle('slow');

          var $moreOrLess =  $(this);

          if($moreOrLess.text() == 'read more...')
          {
              $moreOrLess.text('read less...');
          }
          else if ($moreOrLess.text() == 'read less...') 
          {
              $moreOrLess.text('read more...');
          };

        });


        $('#slideBox').click(function(event) {
          var $parent = $(this).parent();
          var $pObj = $('p').eq(1);

          var height1 = $parent.outerWidth();
          var height2 = $pObj.outerWidth();


          $parent.css({position:'relative'})
          .fadeTo('fast', 0.5)
          .animate({
            left: (height2 - height1) + "px"},
            'slow')
          .fadeTo('fast',1.0)
          .slideUp('slow')
          .queue(function(next) { 
            $parent.css({backgroundColor: '#f00'}); 
            next(); 
          }) 
          .slideDown('slow');

        });


    })
    </script>
  </head> 
 
  <body>  
    <h3 id="fontTest">This is a Test</h3><br>
    <div id="swich">
      <button id="setBigFontSize">Big Font</button>
      <button id="setSmallFontSize">Small Font</button>
      <button id="slideBox">Slide this box</button>
    </div>
    <hr>
    <div class="speech"> 
      <p>Fourscore and seven years ago our fathers brought forth  
           on this continent a new nation, conceived in liberty,  
           and dedicated to the proposition that all men are  
           created equal. 
      </p> 
       <p>Now we are engaged in a great civil war, testing whether  
       that nation, or any nation so conceived and so dedicated,  
       can long endure. We are met on a great battlefield of  
       that war. We have come to dedicate a portion of that  
       field as a final resting-place for those who here gave  
       their lives that the nation might live. It is altogether  
       fitting and proper that we should do this. But, in a  
       larger sense, we cannot dedicate, we cannot consecrate,  
       we cannot hallow, this ground. 
  </p> 
  <a href="#" class="more">read more...</a> 
</div>
  </body> 
</html>